<template>
  <div class="num-label-block">
    <div class="label-icon" :style="{ background: color }"></div>
    <span>{{ name || "" }}</span>
    <span class="label-num">{{ num || 0 }}</span>
    <span>{{ unit || "" }}</span>
  </div>
</template>
<script setup lang="ts">
defineProps({
  color: {
    type: String,
    require: false,
    default: "rgba(107, 156, 255, 1)"
  },
  name: {
    type: String,
    require: false
  },
  num: {
    type: Number,
    require: false
  },
  unit: {
    type: String,
    require: false
  }
});
</script>
<style lang="scss" scoped>
.num-label-block {
  display: flex;
  align-items: center;
  font-size: 10px;
  color: var(--el-text-color1);
  .label-icon {
    width: 4px;
    height: 4px;
    margin-right: 4px;
    border-radius: 4px;
  }
  .label-num {
    margin-left: 8px;
  }
}
</style>
